<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>若依后台管理框架</h2>
        <p>
          若依是一套全部开源的快速开发平台,毫无保留给个人及企业免费使用。基于SpringBoot、Vue3、Element-Plus的前后端分离权限管理系统。系统集成了工作流引擎,可以快速构建企业级流程应用。
        </p>
        <p>
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
        <p>
          <el-tag type="danger">&yen;免费开源</el-tag>
        </p>
        <p>
          <el-button
            type="primary"
            icon="Cloudy"
            plain
            @click="goTarget('https://gitee.com/zhang_xing_ju/RuoYi-Vue-DKFlow.git')"
            >访问码云</el-button
          >
          <el-button
            icon="HomeFilled"
            plain
            @click="goTarget('http://lsjscl.vip')"
            >访问主页</el-button
          >
        </p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="12">
            <h2>技术选型</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <h4>后端技术</h4>
            <ul>
              <li>SpringBoot</li>
              <li>Spring Security</li>
              <li>Flowable</li>
              <li>MyBatis</li>
              <li>Redis</li>
              <li>...</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4>前端技术</h4>
            <ul>
              <li>Vue3</li>
              <li>Element-Plus</li>
              <li>Axios</li>
              <li>Vite</li>
              <li>Pinia</li>
              <li>...</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider />
    
    <!-- 工作流介绍 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <template v-slot:header>
            <div class="clearfix">
              <span>工作流集成说明</span>
            </div>
          </template>
          <div class="workflow-intro">
            <h3>工作流引擎 DK-FlowBoot</h3>
            <p>系统集成了DK-FlowBoot工作流引擎,提供以下功能:</p>
            <ul>
              <li>流程设计器 - 可视化在线设计业务流程</li>
              <li>流程管理 - 流程部署、定义、实例管理</li>
              <li>任务管理 - 待办、已办、我发起的流程</li>
              <li>流程监控 - 实时监控流程执行状态</li>
            </ul>
            
            <h3>快速集成步骤</h3>
            <ol>
              <li>引入dk-flowboot相关依赖</li>
              <li>配置系统数据源</li>
              <li>添加工作流配置类</li>
              <li>编写流程相关接口</li>
              <li>设计流程并发布</li>
            </ol>
            
            <h3>主要特性</h3>
            <ul>
              <li>支持在线设计流程图</li>
              <li>支持流程通过 退回 不通过 退回上一步</li>
              <li>支持条件分支等</li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-divider />

    <!-- 联系信息 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card>
          <template v-slot:header>
            <div class="clearfix">
              <span>联系信息</span>
            </div>
          </template>
          <div class="body">
            <p>
              <i class="el-icon-s-promotion"></i> 官网：<el-link
                href="http://www.ruoyi.vip"
                target="_blank"
                >https://gitee.com/zhang_xing_ju/RuoYi-Vue-DKFlow.git</el-link
              >
            </p>
            <p>
              <i class="el-icon-user-solid"></i> QQ：<a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=HKz42pk2zQ1WUMbbRo50-N7tY4IDKKrj&authKey=ukBg3edmUbnmoo40xZCo6R1tYdTglYJ1nBFRW9gTHuZwLI1r8wgFT6cWUrAldwcr&noverify=0&group_code=187944233" target="_blank">1533195362</a>
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
const version = ref('3.8.9')

function goTarget(url) {
  window.open(url, '__blank')
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .workflow-intro {
    h3 {
      margin: 20px 0 10px;
      font-size: 18px;
      font-weight: 500;
    }
    
    ul, ol {
      padding-left: 20px;
      margin: 10px 0;
      
      li {
        line-height: 26px;
      }
    }
    
    ul {
      list-style: disc;
    }
    
    ol {
      list-style: decimal; 
    }
  }

  // 保留其他原有样式...
}
</style>

